iT邦幫忙

1

D3.js - 基本功能介紹

Ares 2019-10-16 23:00:581389 瀏覽
  • 分享至 

  • xImage
  •  

D3.js(Data-Driven Documents)是一個 JavaScript 的 Library,顧名思義是使用資料驅動文件,它可以操縱 DOM 元素,並讓其做圖像化的呈現,我們通常使用它來操控 SVG 元素以製作精美的圖表,而其寫法相當類似於 jQuery,直接使用 d3 這個物件的方法,之後以 . 進行串接,如下

d3.selectAll('p').text('我愛 How 哥,How 哥 No.1')
// 執行後會將所有 p 元素內容改為 "我愛 How 哥,How 哥 No.1"

安裝可使用 npm 或是 CDN 的方式,我們為了方便就直接使用 CDN 啦~

<script src="https://d3js.org/d3.v5.min.js"></script>

基本上 D3.js 主要可分為三個步驟,以下我們一一介紹

  1. 選取元素
  2. 綁定資料
  3. 繪製畫面

選取元素

選取元素常用的方法有兩種,分別為單選與多選

  • select:選取單一選擇器,類似 querySelector
  • selectAll:選取多個選擇器,類似 querySelectorAll

綁定資料與獲取資料

這邊常用的方法也分為兩種,分別為單一資料一組資料,若不帶入參數可用於資料的獲取,帶入參數則用於資料的綁定

  • data:將元素依序綁定資料,通常一組資料(陣列)
  • datum:將每一個元素綁定單一資料,通常單一資料(字串、數字等)

範例 - datum

這邊每一個 p 段落都被換成傳入的參數了,並且可以看到綁定的資料皆相同

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = '我愛 How 哥,How 哥 No.1'
  d3.selectAll('p').datum(data).text(item => item)
  console.log(d3.selectAll('p').datum())
</script>
</body>

dataum範例

範例 - data

這邊會依序傳入資料,若元素大於資料,後面的元素將不變動

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = ['我愛 How 哥', 'How 哥 No.1']
  d3.selectAll('p').data(data).text(item => item)
  console.log(d3.selectAll('p').data())
</script>
</body>

data範例

資料狀態

資料綁定後分為三個狀態,分別為 updateenterexit

  • update:預設選項,選取已更新資料的元素
  • enter:資料 > 元素時使用,選取多出來的資料
  • exit:元素 > 資料時使用,選取多餘的元素

範例 - enter

這邊第一段與第二段文字有配對到資料,所以狀態皆為 update,而多出來的資料,也就是 How 哥No.1 的部分,他們狀態皆為 enter,所以我們可以將其選取,並插入元素讓資料可以顯示於畫面

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
<script>
  const data = ['我愛', 'How 哥', 'How 哥', 'No.1']
  d3.selectAll('p').data(data).text(item => item)
  d3.select('body').selectAll('p').data(data).enter().append('p').text(item => item)
</script>
</body>

enter範例

範例 - exit

第一段與第二段文字有配對到資料,所以狀態皆為 update,而第三段與第四段因為沒有配對到資料,所以其狀態為 exit,這時候我們就可以對其進行操作,將多餘的資料刪除

<body>
  <p>我是第一段文字</p>
  <p>我是第二段文字</p>
  <p>我是第三段文字</p>
  <p>我是第四段文字</p>
<script>
  const data = ['我愛 How 哥', 'How 哥 No.1']
  d3.selectAll('p').data(data).text(item => item)
  d3.selectAll('p').data(data).exit().remove()
</script>
</body>

exit範例

繪製畫面

知道資料狀態後,接著只要對其做一些操作便可繪製完成圖表,這邊就實際的來做做看吧!
首先新增一個 html 的標籤與一些 css 的樣式

<div class="chart"></div>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

再來是就是 D3 的部分了,這邊我們對選定的元素設定寬度與文字,這樣基本的圖表就完成了

let data = [30, 86, 168, 281, 303, 365]

d3.select('.chart')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('width', item => item + 'px')
  .text(item => item)

圖表範例

我們這邊使用 div 來畫圖表,但 D3 的強項其實是使用 SVG 來繪製,但目前只是先了解如何使用而已,後續會再介紹更多操控 SVG 的方法,屆時就可以做出許多炫砲的圖表或效果囉!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言